<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-if="$route.path=='/putmoneylists'">{{$t('sidebar.business')}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>{{$t('newcrumbs.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('loanMoney.crumbsFour')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search :searchData="searchData" 
        @search="search" 
        @putExcel="putExcel" 
        :searchRight="true"
        :outputRight="$store.state.common.permiss[routename].includes('export')">
    </search>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" stripe v-loading="loadFlag">
          <el-table-column align="center" prop="orderId" :label="$t('public.orderId')" >
          </el-table-column>
          <el-table-column align="center" prop="userId" :label="$t('public.userId')" >
          </el-table-column>
          <el-table-column align="center" prop="order.userName" :label="$t('public.name')" >
          </el-table-column>
          <el-table-column align="center" prop="order.userPhone" :label="$t('public.userTel')" >
          </el-table-column>
          <el-table-column align="center" prop="loanAmount" :label="$t('public.no30')" >
            <template slot-scope="scope">
              <span v-if="scope.row.order.loanAmount!==null&&scope.row.order.loanAmount!==undefined&&scope.row.order.loanAmount!==''">{{$store.state.common.id_currency}}{{$store.getters.moneySplit(scope.row.order.loanAmount)}}{{$store.state.common.vi_currency}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productPeriod" :label="$t('public.no31')+'('+$t('public.no26')+')'" >
            <template slot-scope="scope">
              <span>{{scope.row.order.productPeriod}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="strCreateTime" :label="$t('public.CreateDate')">
            <template slot-scope="scope">
              <span>{{scope.row.order.createTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" :label="$t('public.no82')">
          </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('public.orderStatus')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.rejectStatus(scope.row.status))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="thirdChannel" :label="$t('add.no102')" >
          </el-table-column>
          <!-- <el-table-column align="center" prop="remark" :label="$t('public.no37')" >
          </el-table-column>
          <el-table-column align="center" prop="appName" :label="$t('public.appName')" >
          </el-table-column>
          <el-table-column align="center" prop="appPackage" :label="$t('public.appPackage')" >
          </el-table-column>
          <el-table-column align="center" prop="orderDeviceType" :label="$t('add.no7')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.clientStatus(scope.row.user.regDevice))}}</span>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="220">
            <template slot-scope="scope" >
               <!-- <span 
                v-if="$store.state.common.permiss[routename].includes('reson')&&scope.row.status!=43&&scope.row.isHang!==0"
                class="table_opr" 
                @click="sure(scope.row.orderId)">
                {{$t('add.no93')}}
              </span> -->
              <span 
                v-if="$store.state.common.permiss[routename].includes('again')&&routename=='putmoneylist'&&scope.row.status==1041"
                class="table_opr" 
                @click="showAgain(scope.row)">
                {{$t('add.no47')}}
              </span>
              <span 
                v-if="$store.state.common.permiss[routename].includes('view')" 
                class="table_opr"  
                @click="detail(scope.row.orderId,scope.row.userId)">
                {{$t('public.no29')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>
    <!-- 确认放款弹窗 -->
    <el-dialog :title="$t('public.no67')" :visible.sync="surePutFlag" width="650px">
      <div class="left2right mt15">
        <span class="left">{{$t('loanMoney.resultStatus')}}:</span>
        <div class="right">
          {{resultStatus?resultStatus:$store.state.common.nullData}}
        </div>
      </div>
      <div class="left2right">
        <span class="left">{{$t('loanMoney.resultDesc')}}:</span>
        <div class="right">
          {{resultDesc?resultDesc:$store.state.common.nullData}}
        </div>
      </div>
    </el-dialog>

    <!-- 重新放款弹窗 -->
    <el-dialog :title="$t('add.no47')" :visible.sync="againFlag" width="920px">
      <p>{{$t('add.no51')}}：{{againDetail.thirdChannel|dataIsTrue}} <span class="ml30">{{$t('userDetail.reject_status.no5')}}：{{againDetail.failReason|dataIsTrue}}</span></p>
      <p  class="mgt10">{{$t('add.no48')}}：{{againDetail.refundCount|dataIsTrue}} <span class="ml30">{{$t('add.no101')}}：{{againDetail.loanTime|dataIsTrue}}</span></p>
      <template v-if="againDetail.refundCount>0">
        <p class="mt15" style="font-weight:bold">{{$t('proManage.lastTitle')}}</p>
        <!-- <table class="box" width="100%" v-if="againDetail.refundCount>0"> -->
        <table class="box mt10" width="100%">
        <tr>
          <th>{{$t('yuenan.no18')}}</th>
          <th>{{$t('public.no19')}}</th>
          <th>{{$t('public.no20')}}</th>
          <th>{{$t('yuenan.no20')}}</th>
          <th>{{$t('yuenan.no19')}}</th>
          <th>{{$t('yuenan.no21')}}</th>
          <th>{{$t('public.no22')}}</th>
        </tr>
          <tr >
              <td>{{againDetail.successUserBank.accountType}}</td>
              <td>{{againDetail.successUserBank.bankName}}</td>
              <td>{{againDetail.successUserBank.bankNo}}</td>
              <td>{{againDetail.successUserBank.name}}</td>
              <td>{{againDetail.successUserBank.email}}</td>
              <td>{{againDetail.successUserBank.idCardDate}}</td>
              <td>{{againDetail.successUserBank.status==1?$t('userDetail.bankId_status.no1'):$t('userDetail.bankId_status.no2')}}</td>
          </tr>
        </table>
      </template>
      <p class="mt15 mb20" style="font-weight:bold">*{{$t('add.no50')}}</p>
      <div class="tabs mb20">
        <span style="font-weight:500;">{{$t('public.userId')}}：</span><span>{{againDetail.userId | dataIsTrue}}</span>
        <span class="ml30" style="font-weight:500;">{{$t('public.userName')}}：</span><span>{{againDetail.userName | dataIsTrue}}</span>
        <span class="ml30" style="font-weight:500;">{{$t('public.userPhone')}}：</span><span>{{againDetail.userPhone | dataIsTrue}}</span>
      </div>
      
      
      
      <!-- <div class="detail-line">
        <span>{{$t('public.userId')}}: <i>{{againDetail.userId}}</i> </span>
        <span>{{$t('public.userName')}}: <i>{{againDetail.userName}}</i> </span>
      </div>
      <div class="detail-line">
        <span>{{$t('public.userPhone')}}: <i>{{againDetail.userPhone}}</i> </span>
        <span>{{$t('add.no48')}}: <i>{{againDetail.refundCount}}</i> </span>
      </div> -->
      
      <!-- <div class="left2right mt15">
        <span class="left">{{$t('public.userId')}}:</span>
        <div class="right">{{againDetail.userId}}</div>
      </div>
      <div class="left2right mt15">
        <span class="left">{{$t('public.userName')}}:</span>
        <div class="right">{{againDetail.userName}}</div>
      </div>
      <div class="left2right mt15">
        <span class="left">{{$t('public.userPhone')}}:</span>
        <div class="right">{{againDetail.userPhone}}</div>
      </div>
      <div class="left2right mt15 ">
        <span class="left">{{$t('add.no48')}}:</span>
        <div class="right">{{againDetail.refundCount}}</div>
      </div> -->
      <!-- <div class="left2right">
        <span class="left" style="text-align:left;font-weight:500;">{{$t('add.no51')}}:</span>
        <div class="right">
          <el-select size="small" v-model="againDetail.accountType" :placeholder="$t('public.placeholder')">
            <el-option v-for="(item,i) in options4" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div> -->
      <el-form ref="againDetail" :model="againDetail"  :rules="rules" size="small" :inline="true" label-position="left">
          <el-row>
          <el-form-item :label="$t('add.no102')" prop="accountType">
            <el-select size="small" v-model="againDetail.accountType" :placeholder="$t('public.placeholder')">
              <el-option v-for="(item,i) in options5" :key="i" :label="item.label" :value="item.value">
            </el-option>
            </el-select>
          </el-form-item>
          </el-row>
          <el-form-item :label="$t('public.name')" prop="cardFullname">
            <el-input v-model="againDetail.cardFullname" style="width:215px"></el-input>
          </el-form-item>
          <el-form-item :label="$t('public.no19')" prop="bankId">
            <el-select size="small" v-model="againDetail.bankId" :placeholder="againDetail.bankName">
              <el-option v-for="(item,i) in options3" :key="i" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('finance.bluePayeeAccount')" prop="bankAccount">
            <el-input v-model="againDetail.bankAccount" style="width:215px"></el-input>
          </el-form-item>
          
          <!-- <template v-if="againDetail.accountType=='2'">
            <el-form-item :label="$t('add.no49')">
              <el-input v-model="againDetail.cardYear" style="width:215px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('add.no56')">
              <el-input v-model="againDetail.cardMonth" style="width:215px"></el-input>
            </el-form-item>
            
          </template> -->
            
        <el-form-item :label="$t('yuenan.no19')" prop="email">
          <el-input v-model="againDetail.email" style="width:215px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('add.no57')" prop="branchName">
          <el-input v-model="againDetail.branchName" style="width:215px"></el-input>
        </el-form-item>
      </el-form>
      <div class="flex flex-center">
        <el-button class="mg50" type="info" @click="againClose"> {{$t('public.no50')}} </el-button>
        <el-button class="mg50" type="primary" @click="againSubmit">{{$t('add.no47')}}</el-button>
        
      </div>
    </el-dialog>

    <div class="foot"></div>

  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';//导出excel
import getApp from 'src/mixins/getApp.js';//获取app和aok
import getMerchant from 'src/mixins/getMerchant.js';
export default {
  name: 'putMoneyList',
  mixins:[putExcel,getApp,getMerchant],
  data () {
      const searchData=[
      {
        type: 'input',
        label: 'public.orderId',
        attr: 'orderId',
        value: ''
      },
      {
        type: 'input',
        label: 'public.userId',
        attr: 'userId',
        value: ''
      },
      {
        type: 'input',
        label: 'public.name',
        attr: 'userName',
        value: ''
      },
      {
        type: 'input',
        label: 'public.userPhone',
        attr: 'userPhone',
        value: ''
      },{
        type: 'select',
        attr: 'status',
        label: 'public.orderStatus',
        option: this.$store.state.options.order_select, // 订单状态下拉选框信息
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'appName',
        label: 'public.appName',
        option: [],
        value: '',
        langFlag: false,
      },{
        type: 'select',
        attr: 'appPackage',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      },{
        type: 'select',
        attr: 'regDevice',
        label: 'add.no7',
        option: this.$store.state.options.loanDevice_options, // 借款客户端,
        value: '',
        langFlag: true,
      },{
        type: 'rangePicker',
        label: 'public.CreateDate',
        attr: 'applyTime',
        value: [],
      },{
        type: 'rangePicker',
        label: 'public.no82',
        attr: 'createTime',
        value: [],
      },
      this.$route.name=='putmoneylists'?{
        type: 'select',
        attr: 'partnerId',
        label: 'proManage.partnerName',
        option: [], //商户名称
        value: '',
        langFlag: false,
      }:''
    ]
    return {
      routename: this.$route.name,
      flag: true,
      loadFlag: true,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: { // 用户查询信息数据对应字段
        orderId:'',
        userId:'',
        userName:'',
        userPhone:'',
        status:'',
        regDevice:'',
        appName:'',
        appPackage:'',
        applyTimeBegin:'',
        applyTimeEnd:'',
        createTimeBegin:'',
        createTimeEnd:''
      },
      options1: this.$store.state.options.putMoney_options, // 订单状态下拉选框信息
      options2: this.$store.state.options.loansType_options, // 贷款类型下拉选框信息
      options3: [], // 银行名称
      options4: [
        {id:2,label:'ATM_Card',value:'2'},
        {id:3,label:'bankAccount',value:'3'}
      ], // 账户类型
      options5: [],
      tableData: [], // 借款信息数据模拟
      surePutFlag: false, // 详情弹窗
      againFlag: false, // 重新放款弹窗
      orderNo: '', // 点击当前行的订单ID
      resultStatus: '', // 向支付通道返回的结果状态码
      resultDesc: '',// 向支付通道返回的结果描述
      againForm: {},
      againDetail: {
        accountType: '',
        bankId: '',
        bankAccount: '',
        cardFullname: '',
        branchName: '',
        email: '',
      },
      putExcelUrl:this.$action.loan_lendExport,
      rules: {// 验证规则
        accountType: [
          { required: true,message: this.$t("login.required"), trigger: 'change' }
        ],
        cardFullname: [
          { required: true,message: this.$t("login.required"), trigger: 'blur' }
        ],
        bankId: [
          { required: true,message: this.$t("login.required"), trigger: 'change' }
        ],
        bankAccount: [
          { required: true,message: this.$t("login.required"), trigger: 'blur' }
        ],
        email:[
          { required: true,message: this.$t("login.required"), trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.putList();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.putList();
    },
    search(search) { // 搜索
        this.formInline=search;
        this.formInline.applyTimeBegin=search.applyTime?search.applyTime[0]:'';
        this.formInline.applyTimeEnd=search.applyTime?search.applyTime[1]:'';
        this.formInline.createTimeBegin=search.createTime?search.createTime[0]:'';
        this.formInline.createTimeEnd=search.createTime?search.createTime[1]:'';
        if (this.flag) {
          this.flag = false;
          this.currentPage = 1;
          this.putList();
        }
    },
    putList () { // 放款列表数据
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.loan_lendList, option).then(res => {
        this.flag = true;
        this.loadFlag = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    sure (id) { // 确认放款款弹窗
      this.orderNo = id;
      this.surePutFlag = true;
      this.putMoneyResult();
    },
    putMoneyResult () { // 点击确认放款按钮项第三方查询结果
      let option = {
        param: {
          orderNo: this.orderNo
        } 
      }
      this.$axios.post(this.$action.loan_lendFail, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.resultStatus = res.data.transferStatus;
          this.resultDesc = res.data.transferStatusDesc;
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
    detail (orderId, userId) { // 查看详情操作
      this.$router.push({path: '/loandetail', query: {userId, orderId}})
    },
    againSubmit(){
      let option = {
        param:{
          id: this.againDetail.id,
          receiptName: this.againDetail.accountType, 
          bankNo: this.againDetail.bankNo,
          phone:this.againDetail.userPhone,
          name: this.againDetail.cardFullname,
          account: this.againDetail.bankAccount,
          email: this.againDetail.email,
          branch: this.againDetail.branchName, 
        }
      }
      this.$refs.againDetail.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$action.loan_lendRenew, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'));
              this.putList();
              this.$refs.againDetail.resetFields();
              this.againClose();
            } else {
              this.$globalMsg.error(res.message);
            }
          })
        }
      })
    },
    againClose(){
      // this.againDetail = {
      //   accountType: '',
      //   bankId: '',
      //   bankAccount: '',
      //   cardFullname: '',
      //   branchName: '',
      //   email: '',
      // };
      this.$refs.againDetail.resetFields();
      // this.againDetail.accountType = '';
      this.againFlag = false;
    },
    showAgain(row){
      this.againDetail.id = row.id
      // this.againDetail.orderNo = row.orderNo
      this.againDetail.userPhone = row.order.userPhone
      this.againDetail.userId = row.userId
      this.againDetail.userName = row.order.userName
      this.getBankList();
      this.getMethods();
      this.getDetailData(row.id);
    },
    getBankList(id){ // 获取银行名称下拉框   
      this.$axios.post(this.$action.loan_lendBank,{param:{}}).then(res => {
        if (res.code == 200) {
          let arr = res.data;
          arr.forEach(value=>{
            value.label = value.bankName;
            value.value = value.bankName;
          })
          this.options3 = arr;
          this.againFlag = true
        }
      })
    },
    getMethods(){ // 放款方式下拉框   
      this.$axios.post(this.$action.loan_lendMethods,{param:{}}).then(res => {
        if (res.code == 200) {
          let arr = res.data;
          arr.forEach(value=>{
            value.label = value.name;
            value.value = value.key;
          })
          this.options5 = arr;
          this.againFlag = true
        }
      })
    },
    getDetailData(id){// 点击单条显示详情数据
      let option={
        param:{}
      }
      this.$axios.post(this.$action.loan_lendDetail+id,option).then(res => {
        if (res.code == 200) {
          this.againDetail.email = res.data.bank.email;
          this.againDetail.accountType = res.data.accountType;
          this.againDetail.refundCount = res.data.countLendingSuccess;
          this.againDetail.failReason = res.data.failReason;
          this.againDetail.thirdChannel = res.data.thirdChannel;
          this.againDetail.cardFullname = res.data.bank.cardFullName;
          this.againDetail.branchName = res.data.bank.branchName;
          this.againDetail.bankAccount = res.data.bank.bankAccount;
          this.againDetail.bankName = res.data.bank.bankName;
          this.againDetail.cardYear = res.data.bank.cardYear;
          this.againDetail.cardMonth = res.data.bank.cardMonth;
          this.againDetail.successUserBank = res.data.lastSuccessAccount;
          this.againDetail.loanTime=res.data.lastSuccessAccount?res.data.lastSuccessAccount.loanTime:'';
          this.againDetail.bankId =  res.data.bank.bankName;
          this.againDetail.bankNo=res.data.bank.bankNo;
          // this.againFlag = true
        }
      })
    }
  },
  watch: {
    againFlag(val){
      if(!val){
        this.againClose();
      }
    }
  },
  mounted () {
    this.getApp().then(app=>{
      this.searchData[5].option=app.appName;
      this.searchData[6].option=app.appPackage;
    })
    if(this.$route.name=='putmoneylists'){
      this.getMerchant().then(arr=>{
        this.searchData[10].option=arr;
      })
    }
    this.putList();// 放款列表数据
    // this.getBankList();
  }
}
</script>
<style scoped lang="scss">
  .mg50{
    margin: 0 50px;
  }
  .detail-line{
    margin: 10px 0;
    font-size: 15px;
    color: #333a4d;
    font-weight: bold;
    span{
      margin-right: 50px;
      i{
        font-style: normal;
        color: #585858;
        font-weight: normal;
      }
    }
  }
  .tabs .tabs_main > li{
    padding: 0;
    .oneLineHasTwo{
      margin-bottom: 0;
    }
  }
  .mgt10{
    margin-top: 10px;
  }
  .box{
    width: 100%;
  }
  table{
    margin-bottom: 1em;
    overflow: auto;
    box-sizing: border-box;
    display: table;
    text-shadow: 0px 1px 0px #fff;
    border-collapse: collapse;
    border-spacing: 0;
    color: #292e31;
    font-size: 14px;
    tr:last-child {
        border-bottom: 1px solid #ccc;
    }
    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    th {
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        vertical-align: bottom;
        line-height: 1.6;
        text-align: left;
        font-weight: bold;
        display: table-cell;
    }
    tr:nth-child(odd)>td {
        background-color: #f8f8f8;
    }
    td.nowrap {
        word-break: keep-all;
        white-space: nowrap;
    }
    td{
        display: table-cell;
        padding: 10px;
        vertical-align: top;
        line-height: 1.6;
    }
  }
</style>
